<template>
  <div class="home">
   <transition>
   <h1 v-if="show">hello Vue</h1>
   </transition>
   <button @click="show=!show">切换</button>

   <my-table></my-table>

  </div>
</template>

<script>
// @ is an alias to /src
import myTable from '@/components/myTable.vue'
import {ref} from 'vue'
export default {
//   name: 'HomeView',
setup(props) {
    const show = ref(false)
    return {show}
},
  components: {
    myTable
  }
}
</script>
<style lang="scss" scoped>
// 动画进入的状态  以某种状态进入
.v-enter-from{
    opacity: 0;
}
// 进入到某种状态
// .v-enter-to{
//     opacity: 1;
// }
// 以某种状态离开
// .v-leave-from{
//     opacity: 1;
// }
// 离开到某种状态
.v-leave-to{
    opacity: 0;
}


.v-enter-active,.v-leave-active{
    transition: all 2s linear;
}

</style>

